import { useEffect } from "react";
import styles from "./SubView.less";
import { useAnimate, useInView } from "motion/react";

export default ({ text }: { text: string }) => {

    const [scope, animate] = useAnimate();

    const isInView = useInView(scope);

    useEffect(() => {
        if (isInView) {
            animate(scope.current, { opacity: 1, scale: 1, }, { duration: 0.5 });
        } else {
            animate(scope.current, { opacity: 0, scale: 0.75 }, { duration: 0.5 });
        }
     }, [isInView])

    return (
        <div ref={scope} className={styles.subView}>
            {text}
        </div>
    );
}